<template>
  <div class="chart-detail">
    <div class="detail-top">
      <div class="top-left">
        医疗收入占比情况（月）
      </div>
      <div class="top-right" @click="goBack">
        返回
      </div>
    </div>
    <div class="detail-box" :style="{height:height+'px'}">
      <h3 class="chart-title">
        <div class="title-circle"></div>
        <div class="title-name">{{title}}</div>
      </h3>
      <div class="detail-content"  id="myChart">

      </div>
    </div>
  </div>
</template>
<script>
  import {getChartItemDetail1} from '../../api/api'
  export default {
    name:'chartDetail',
    props:['isChange'],
    data() {
      return {
        title:'2017年区域增长什么什么图',
        height:800
      }
    },
    mounted() {
      this.getContentH();
      setTimeout(()=>{
        this.myChart = this.$echarts.init(document.getElementById('myChart') ,null, {renderer: 'canvas'})
        //给echart 加loading效果
        this.myChart.showLoading()
        let params = this.$route.params
        console.log(params)
        getChartItemDetail1('report/medExpGrowthTrendAnalysisDetail',params.queryYear,params.areaCode,params.costType,params.medicalCategory).then(res=>{
          let json = res.data;
          if(res.code==0){
            this.title = json.reportName;
            this.drawLine(json);
          }
        })
      },101)
    },
    watch:{
      isChange(){
        this.getContentH();
      },
    },
    methods: {
      //设置高度
      getContentH(){
        setTimeout(()=>{
          let height = document.documentElement.clientHeight;
          let barHeight = 0;
          if (document.querySelector('.el-header')) {
            barHeight = document.querySelector('.el-header').clientHeight;
          }
          this.height = height - barHeight - 84;
        },100)
        if(this.myChart){
          setTimeout(()=>{
            this.myChart.resize();
          },301)
        }
      },
      goBack(){
        this.$router.go(-1);
      },
      drawLine(json){
        this.myChart.hideLoading();
        this.myChart.setOption({
          // Make gradient line here
          grid:[//此参数可在一个dom中划分多个图表 可设置不同图表的位置
            {
              height: '24%',
              top:'6%',
              tooltip: {
                formatter: "{b}</br>{c}%" //给当前坐标系添加弹窗
              }
            },
            {
              height: '55%',
              top:'32%',
              tooltip: {
                show:false,

              }
            }
          ],
          legend: {

          },
          tooltip: {

          },
          xAxis: [{
            data: json.yearMonthList,
            show:true,
            axisLine:{
              show:true,//显示x轴坐标线并设置为虚线
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisTick:{
              show:false //不显示x轴坐标的刻度
            },
            axisLabel:{
              show:false //不显示x轴坐标数值
            }
          }, {
            data: json.yearMonthList,
            gridIndex: 1,
            axisLine:{ //x轴的横线是否显示
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            axisTick:{ //x轴的刻度短竖线是否显示
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }],
          yAxis: [{
            splitLine: {
              show: false
            },
            position:'right',
            /*minInterval:5,*/
            splitNumber:3,
            axisLine:{
              show:false
            },
            axisTick:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }, {
            gridIndex: 1,
            axisLine:{
              show:true,
              lineStyle:{
                color:'#2a4565'
              }
            },
            splitLine: {
              show:true,
              lineStyle:{
                type:'dashed',
                color:'#2a4565'
              }
            },
            axisTick:{
              show:false
            },
            axisLabel : {
              formatter: '{value}',
              textStyle: {
                color: '#fff'
              }
            },
          }],
          series: [{
            type: 'line',
            showSymbol: true,
            data: json.yearlyGrowthRateList,
            symbolSize: 10,
            color:'#129cff',
            symbol:'circle',
            label:{
              show:true,
              position:'top',
              formatter:'{c}%',
              color:'#fff'
            },
            markLine:{
              label:{
                position: 'start',
                formatter: '平均增长率\n{c}%',
              },
              symbol: 'none',//设置平均线的两端没样式
              data : [
                {
                  type : 'average',
                  name: '平均值',
                }
              ],
              lineStyle: {
                color:'#ff6a93'
              }
            }
          },{
            type: 'bar',
            showSymbol: false,
            data: json.yearlyTotalCostList,
            color:'#ff6a93',
            label:{
              show:true,
              position:'top',
              formatter:function(params){
                let val = parseInt((params.value)*100)/100+'万元'
                return val;
              },
              color:'#fff'
            },
            barWidth: '30%',
            xAxisIndex: 1,
            yAxisIndex: 1
          }]
        });
      },
    }
  }
</script>
<style scoped>
  .chart-detail{

  }
  .detail-top{
    height:44px;
    line-height:44px;
    overflow:hidden;
    background:#0f1e31;
  }
  .top-left{
    float: left;
    font-size: 18px;
    color: #fff;
    line-height: 34px;
    height: 34px;
    border-left: solid 2px #2b9ff6;
    padding-left: 15px;
    margin-top: 5px;
  }
  .top-right{
    float:right;
    margin-right:30px;
    font-size:16px;
    color:#1380e1;
    cursor:pointer;
  }
  .detail-box{
    background:#1B2B44;
    margin:20px 30px;
  }
  .detail-content{
    width:100%;
    height:95%;
  }
  .chart-title{
    box-sizing:border-box;
    height:36px;
    line-height:36px;
    color:#fff;
    font-size:14px;
  }
  .title-circle{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #018DDE;
    display: inline-block;
    margin-left: 10px;
  }
  .title-name{
    display: inline-block;
    font-size: 16px;
    margin-left: 5px;
  }
</style>
